<template>
	<div class="add">
			<form>
				<p>
					<label>姓名：</label>
					<input type="text" placeholder="请输入名字" v-model="uname" />
				</p>
				<p>
					<label>性别：</label>
					<input type="radio" value="1" name = 'gender' v-model.number="gender"/>男
					<input type="radio" value="0" name = 'gender'  v-model.number="gender"/>女
				</p>
				<p>
					<select v-model.number="post">
						<option value="" disabled="">--请选择--</option>
						<option value="1">组长</option>
						<option value="2">组员</option>
					</select>
				</p>
				<p>
					<input type="button" value="添加" @click="add()" />
				</p>
			</form>
			<!-- 子组件 -->
			<router-view :propmsg = 'objmsg'></router-view>
		</div>
</template>

<script>

import Tabs from'./Tabs.vue';
	
export default{
	name:'Main',
	data(){
			return{
				uname:'123',
				gender:1,
				post:'',
				objmsg:{}
			}
		},
		components:{
			Tabs
		},
		methods:{
			add(){
				if(this.uname!='' && this.post!=''){
					this.objmsg={
						uname:this.uname,
						gender:this.gender,
						post:this.post
					};
				}
			}
		}
}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
	}
	.app{
		margin-top: 20px;
		margin-left: 20px;
		border: 1px solid gainsboro;
		border-radius: 6px;
		overflow: hidden;
		width: 1000px;
	}
	.app .add form{
		display: flex;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid gainsboro;
	}
	.app .add form label{
		width: 60px;
		display: inline-block;
		margin-left: 10px;
		line-height: 35px;
		color: darkcyan;
		font-weight: bold;
	}
	.app .add form input[type = 'text']{
		width: 300px;
		border-radius: 6px;
		border: 1px solid gainsboro;
		line-height: 35px;
		text-indent: 1em;
		outline: none;
	}
	.app .add form select{
		width: 200px;
		height: 35px;
		border-radius: 6px;
		border: 1px solid gainsboro;
		margin-right: 10px;
	}
	.app .add form input[type = 'button']{
		width: 150px;
		border: none;
		background-color: #008B8B;
		line-height: 35px;
		color: white;
		border-radius: 6px;
	}
</style>
